<template>
  <PageWrapper contentBackground contentClass="flex" dense contentFullHeight fixedHeight>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <BasicUpload
          :maxSize="1"
          :maxNumber="1"
          @change="handleChange"
          :api="uploadApi"
          class="my-5"
          :accept="['image/*']"
        />
        <!-- <a-button type="primary" class="my-4" @click="openDetail"> 添加Banner </a-button> -->
        <!-- <a-button type="primary" @click="handleReloadCurrent"> 刷新当前页 </a-button> -->
        <!-- <a-button type="primary" @click="handleReload"> 刷新并返回第一页 </a-button> -->
      </template>
      <template #bodyCell="{ column, record, text }">
        <template v-if="column.key === 'statusName'">
          <span
            :style="{
              color: column.key === 'statusName' && record.status === 1 ? 'green' : 'red',
            }"
          >
            {{ record.statusName }}
          </span>
        </template>
        <template v-else-if="column.key === 'imgList'">
          <TableImg :size="60" :simpleShow="true" :imgList="text" />
        </template>
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                label: '删除',
                popConfirm: {
                  title: '是否删除？',
                  confirm: handleDelete.bind(null, record),
                },
              },
              {
                label: record.status == 1 ? '禁用' : '启用',
                popConfirm: {
                  title:
                    record.status == 1
                      ? '禁用后图片将从官网首页轮播图撤下，是否禁用'
                      : '启用后图片将加入到官网首页轮播图，是否启用？',
                  confirm: handleUpdate.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { BasicTable, useTable, BasicColumn, TableImg, TableAction } from '@/components/Table';

  import { PageWrapper } from '@/components/Page';
  // import DrawerGoodsDetail from './goodsDetail.vue';
  import {
    bannerListApi,
    bannerDeleteApi,
    bannerSaveApi,
    bannerUpdateStatusApi,
  } from '@/api/banner/banner';
  import { useMessage } from '@/hooks/web/useMessage';
  import { BasicUpload } from '@/components/Upload';
  import { uploadApi } from '@/api/sys/upload';

  const { createMessage } = useMessage();

  function handleChange(values) {
    saveBanner(values[0]);
  }

  const [registerTable, { reload }] = useTable({
    title: '加载banner列表',
    api: bannerListApi,
    columns: getBasicColumns(),
    actionColumn: {
      width: 160,
      title: '操作',
      dataIndex: 'action',
    },
    pagination: false,
  });
  function handleReloadCurrent() {
    reload();
  }

  function getBasicColumns(): BasicColumn[] {
    return [
      {
        title: '图片',
        dataIndex: 'imgList',
      },
      {
        title: '编号',
        dataIndex: 'id',
        ifShow: false,
      },
      {
        title: 'url',
        dataIndex: 'url',
        ifShow: false,
      },
      {
        title: '排序',
        dataIndex: 'sort',
        ifShow: false,
      },
      {
        title: '创建人',
        dataIndex: 'creatorName',
      },
      {
        title: '创建时间',
        sorter: true,
        dataIndex: 'createTime',
      },
      {
        title: '启用状态',
        sorter: true,
        dataIndex: 'statusName',
      },
    ];
  }

  function handleDelete(record) {
    bannerDeleteApi({ id: record.id }).then((data: number) => {
      if (data && data > 0) {
        createMessage.success('banner已被删除');
        handleReloadCurrent();
      }
    });
  }

  function saveBanner(url) {
    bannerSaveApi({ url: url }).then((data: number) => {
      if (data && data > 0) {
        createMessage.success('创建成功');
        handleReloadCurrent();
      }
    });
  }

  function handleUpdate(record) {
    bannerUpdateStatusApi({ id: record.id, status: record.status == 1 ? 0 : 1 }).then(
      (data: number) => {
        if (data && data > 0) {
          createMessage.success(record.status == 1 ? '已禁用' : '已启用');
          handleReloadCurrent();
        }
      },
    );
  }
</script>
